<template>
    <div class="LoginBigBox">
        <div class="LoginBox">
            <div class="LoginLogo">
                <span class="iconfont icon-tianmaoxingxiang2"></span>
            </div>
            <div class="name">
                <input type="text" v-model="phonenumber" placeholder="请输入手机号">
            </div>
            <div class="verificationCode">
                <input type="password" v-model="verifyCode" placeholder="请输入验证码">
                <p class="verify" v-show="!noteShow" @click="getverifyCodeBtn">获取验证码</p>
                <p class="verify" v-show="noteShow">{{time}}s</p>
            </div>
            <div class="LBtn" @click="enterBtn">
                <span>登录</span>
            </div>
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant'
export default {
    data(){
        return{
            phonenumber:'',
            verifyCode:'',
            noteShow:false,
            time:10,
            timeFun:null,
        }
    },
    methods:{
        // 获取验证码
        getverifyCodeBtn(){
            if(this.phonenumber == ''){
                Toast("手机号码不能为空");
                return;
            }
            this.noteShow = true;
            console.log(this.time);
            let _this = this;
            Toast("验证码已发送");
            this.timeFun=setInterval(function(){
                if(_this.time > 0){
                    _this.time -=1;
                }else if(_this.time <= 0){
                    clearInterval(_this.timeFun);
                    _this.noteShow = false;
                }
            }, 1000);
        },
        // 登录按钮
        enterBtn(){
            if(this.phonenumber == '' || this.verifyCode == ''){
                Toast("请输入正确的手机号或验证码");
                return;
            }
            this.$router.push({name:'my'})
        }
    },
    watch:{
        // time(){
        //     this.getverifyCodeBtn();
        // }
    }
}
</script>

<style lang="less">
.LoginBigBox{
    width: 100%;
    height: 666px;
    background-color:orange;
}
.LoginBox{
    text-align: center;
    width: 69%;
    margin: 0px auto;
    padding-top: 120px;
    .LoginLogo{
        padding: 30px 0px;
        span{
            font-size: 60px;
        }
    }
    .name{
        margin-top: 10px;
        input{
            border: none;
            width: 95%;
            padding: 10px 0px;
            padding-left: 15px;
            border-radius: 20px;
        }
    }
    .verificationCode{
        margin-top: 10px;
        position: relative;
        input{
            border: none;
            width: 95%;
            padding: 10px 0px;
            padding-left: 15px;
            border-radius: 20px;
        }
        .verify{
            position: absolute;
            top: 7px;
            right: 4px;
            background-color: #eee;
            padding: 4px 15px;
            border-radius: 20px;
            font-size: 12px;
        }
    }
    .LBtn{
        margin-top: 10px;
        background-color: rgb(255, 228, 108);
        border-radius: 20px;
        padding: 10px 0px;
    }
}
</style>